<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.box div{
			width: 1000px;
			height: 200px;
			margin: 0 auto;
		}
		/*	linear-gradient 背景渐变	*/
		/*	线性渐变 --- 从上到下（默认）	*/
		.box div:nth-of-type(1){
			background: linear-gradient(pink,greenyellow,skyblue);
		}
		/*	线性渐变 --- 从左到右 （同标方为）	*/
		.box div:nth-of-type(2){
			background: linear-gradient(to right,pink,greenyellow,skyblue);
		}
		/*	线性渐变 --- 从右下到左上 （同标方为）	*/
		.box div:nth-of-type(3){
			background: linear-gradient(to left top,pink,greenyellow,skyblue);
		}
		/*	线性渐变 --- 指定角度渐变 度数+deg	*/
		.box div:nth-of-type(4){
			background: linear-gradient(-45deg,pink,greenyellow,skyblue);
		}
		/*	radial-gradient 怪向渐变 --- 颜色均匀分布开 */
		.box div:nth-of-type(5){
			background: radial-gradient(pink,greenyellow,skyblue);
		}
		/*	radial-gradient 怪向渐变 --- 颜色不均匀分布开 设置颜色占比*/
		.box div:nth-of-type(6){
			background: radial-gradient(pink 20%,greenyellow 20%,skyblue 60%);
		}
		/*	radial-gradient 怪向渐变 --- 设置形状 circle圆形*/
		.box div:nth-of-type(7){
			background: radial-gradient(circle,pink 20%,greenyellow 20%,skyblue 60%);
		}
	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>


	</div>
</body>
</html>